<template>
  <view class="content">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader pageTitle="添加优惠券"></singleHeader>
    <!-- #endif -->

    <view class="mForm">
      <view class="mForBox">
        <view class="mFormItem">
          <view class="let">
            <text class="ts">*</text>
            优惠券名
          </view>
          <view class="rig">
            <view class="inp">
              <input
                type="text"
                :placeholder="$t('newAdmin.order.PleaseEnter')"
              />
            </view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">优惠券类型</view>
          <view class="rig">
            <view class="inp">
              <picker :value="0" :range="[]"></picker>
            </view>
            <view class="icon"><i class="iconfont icon-arrow-right"></i></view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">优惠金额</view>
          <view class="rig">
            <view class="inp">
              <input type="digit" />
            </view>
            <view class="icon">元</view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">
            <text class="ts">*</text>
            最低消费金
          </view>
          <view class="rig">
            <view class="inp">
              <input type="digit" />
            </view>
            <view class="icon">元</view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">到期类型</view>
          <view class="rig">
            <view class="inp">
              <picker :value="0" :range="[]"></picker>
            </view>
            <view class="icon"><i class="iconfont icon-arrow-right"></i></view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">有效天数</view>
          <view class="rig">
            <view class="inp">
              <input type="number" />
            </view>
            <view class="icon">天</view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">发放总数</view>
          <view class="rig">
            <view class="inp">
              <input type="number" />
            </view>
            <view class="icon">张</view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">商品类别</view>
          <view class="rig">
            <view class="inp">
              <picker :value="0" :range="[]"></picker>
            </view>
            <view class="icon"><i class="iconfont icon-arrow-right"></i></view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let">是否可转赠</view>
          <view class="rig">
            <view class="inp">
              <picker :value="0" :range="[]"></picker>
            </view>
            <view class="icon"><i class="iconfont icon-arrow-right"></i></view>
          </view>
        </view>

        <view class="mFormItem">
          <view class="let"><text class="ts">*</text>使用说明</view>
          <view class="rig">
            <view class="inp">
              <input type="text" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="submit">
      <view class="m-btn">保存</view>
    </view>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";

// import { storeAdminGetExpress, storeAdminOrderSend } from "@/api/admin";
export default {
  components: {
    singleHeader,
  },

  data() {
    return {
      showPop: false,
      order_id: undefined,
      expressList: [],
      diabled: false,

      form: {
        express: "", // 快递公司
        is_express: "1", // 1是 2.否
        express_no: "", // 运单号
        post_code: "", // 收件人邮编
        words: "", // 商家备注
      },
    };
  },

  computed: {
    // getClass() {
    //   return (id) => {
    //     return id === this.form.is_express ? `on item${id}` : `item${id}`;
    //   };
    // },
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();
    this.order_id = opi.id;
  },

  mounted() {},

  methods: {
    openPicker(el) {
      this[el] = true;
    },

    bindPickerChange(e, mode, el) {
      switch (mode) {
        case "single-column":
          this.form[el] = e[0].label;
          break;
      }
    },

    storeAdminGetExpress() {
      // storeAdminGetExpress().then((res) => {
      //   if (res.code === 0) {
      //     if (res.data.express.length) {
      //       this.expressList = res.data.express.map((el, i) => {
      //         return {
      //           label: el,
      //           value: i,
      //         };
      //       });
      //     }
      //   }
      // });
    },

    storeAdminOrderSend(data) {
      this.diabled = true;
      // storeAdminOrderSend(data)
      //   .then((res) => {
      //     this.diabled = false;
      //     if (res.code === 0) {
      //       this.$utils.showModal(
      //         this.$t("newAdmin.warning.title"),
      //         res.msg,
      //         false,
      //         () => {
      //           uni.navigateBack();
      //         }
      //       );
      //       return;
      //     }

      //     this.$utils.toast(res.msg);
      //   })
      //   .catch(() => {
      //     this.diabled = false;
      //   });
    },

    submit() {
      let { form, order_id, diabled } = this;

      if (this.diabled) {
        return;
      }

      // if (form.is_express === "1") {
      //   if (!form.express) {
      //     this.$utils.toast(
      //       this.$t("newAdmin.warning.pleaseSelect") +
      //         this.$t("newAdmin.order.CourierServicesCompany")
      //     );
      //     return;
      //   }

      //   if (!form.post_code) {
      //     this.$utils.toast(
      //       this.$t("newAdmin.warning.PleaseFillIn") +
      //         this.$t("newAdmin.order.Recipientzipcode")
      //     );
      //     return;
      //   }

      //   if (!form.express_no) {
      //     this.$utils.toast(
      //       this.$t("newAdmin.warning.PleaseFillIn") +
      //         this.$t("newAdmin.order.courierNumber")
      //     );
      //     return;
      //   }
      // }

      // this.storeAdminOrderSend({
      //   ...form,
      //   order_id,
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 150rpx;
}

.mForm {
  padding: 0 36rpx;
  background: #fff;
}

.mForBox {
  border-radius: 20rpx;
  overflow: hidden;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  font-size: 30rpx;
  color: #1d1d1d;
  border-bottom: 1px solid #f2f2f2;

  .let {
    width: 200rpx;
    color: #1d1d1d;

    text {
      color: #f0250e;
    }
  }

  .rig {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 10rpx;
  }

  .inp {
    flex: 1;
    height: 100rpx;
    line-height: 100rpx;
    text-align: right;
  }

  picker,
  input {
    width: 100%;
    height: 100%;
    font-size: 30rpx;
  }

  /* 
    .input {
      height: 100rpx;
      line-height: 100rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  */

  .icon-arrow-right {
    font-size: 22rpx;
    color: #888;
  }

  .inpSort {
    margin-left: 10rpx;
  }

  &:last-of-type {
    border-bottom: 0;
  }
}

.submit {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 10rpx 36rpx calc(env(safe-area-inset-bottom) + 10rpx);
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}
</style>
